<template>
    <div info-container>
        <!-- 筛选日志 -->
        <div class="select-container">
            <el-form>
                <el-form-item label="创建时间" :model="selectForm" :inline="true">
                    <el-col :span="5">
                        <el-date-picker 
                            type="date" placeholder="开始日期" 
                            v-model="selectForm.startTime" style="width: 100%;"
                            value-format="yyyy-MM-dd"
                            >
                        </el-date-picker>
                    </el-col>
                    <el-col :span="1"><div>至</div></el-col>
                    <el-col :span="5">
                        <el-date-picker 
                            type="date" placeholder="结束日期" 
                            v-model="selectForm.endTime" style="width: 100%;" 
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-col>
                </el-form-item>
                
                <el-row >
                    <el-col :span="8">
                        <el-form-item label="修改操作">
                            <el-select v-model="selectForm.operation" placeholder="请选择您的修改操作">
                                <el-option label="增加" value="增加"></el-option>
                                <el-option label="删除" value="删除"></el-option>
                                <el-option label="修改" value="修改"></el-option>
                                <el-option label="全选" value="全选"></el-option>
                            </el-select>
                        </el-form-item>  
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="修改书院">
                            <el-input v-model="selectForm.academyName" placeholder="请输入您修改的书院" style="width: 60%;"></el-input>
                        </el-form-item>
                    </el-col>        
                    <el-col :span="3">
                        <div>
                            <el-col :span="2"><el-button type="primary" @click="search()">查询</el-button></el-col>
                        </div>
                        
                    </el-col>
                </el-row> 
            </el-form>
        </div>
        <el-divider></el-divider>
        <!-- 日志列表 -->
        <div class="table-container">
            <el-table :data="jourdata.jourlist" stripe style="width: 100%" border
            :header-cell-style="{background:'rgb(178, 147, 147)',color:'rgb(57, 50, 50)'}">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="userName" label="用户名"></el-table-column>
                <el-table-column prop="operate" label="操作"></el-table-column>
                <el-table-column prop="academyName" label="操作书院"></el-table-column>
                <el-table-column prop="subjectOld" label="旧主体"></el-table-column>
                <el-table-column prop="relationOld" label="旧联系"></el-table-column>
                <el-table-column prop="objectOld" label="旧客体"></el-table-column>
                <el-table-column prop="subjectNew" label="新主体"></el-table-column>
                <el-table-column prop="relationNew" label="新联系"></el-table-column>
                <el-table-column prop="objectNew" label="新客体"></el-table-column>
                <el-table-column prop="createTime" label="修改时间"></el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
       <el-pagination
        layout="total, prev, pager, next"
        :total="this.jourdata.total"
        @current-change="handleCurrentChange" 
        :current-page="currentPage"
        :page-size="pagesize"
      >
      </el-pagination> 
    </div>
</template>

<script>
    import requests from '@/api/ajax'
    export default{
        data() {
            return {
                selectForm: {
                    startTime: '',
                    endTime: '',
                    operation: '',
                    academyName: ''
                },
                jourdata: {
                    jourlist:[],
                    total: 0
                },
                currentPage: 1, //当前页 刷新后默认显示第一页
                pagesize: 5,
            }
        },
        created() {
            this.search()
        },
        methods: {
            search(){
                // console.log(this.selectForm)
                if(this.selectForm.endTime == null) {
                    this.selectForm.endTime = ''
                }
                if(this.selectForm.startTime == null) {
                    this.selectForm.startTime = ''
                }
                if(this.selectForm.operation == '全选') {
                    this.selectForm.operation = ''
                    console.log(this.selectForm.operation);
                }
                requests.get('/changes/myLog',
                {
                    params: {
                        page: 1,
                        pageSize: 5,
                        startTime: this.selectForm.startTime,
                        endTime: this.selectForm.endTime,
                        operation: this.selectForm.operation,
                        academyName: this.selectForm.academyName,
                    }
                }
                ).then(
                    (res) => {
                        // console.log(res)
                        this.jourdata.jourlist = res.data.records
                        this.jourdata.total = res.data.total
                        // console.log(this.selectForm.operation);
                    }
                )
            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage
                // console.log(this.currentPage)
                requests.get('/changes/myLog',
                {
                    params: {
                        page: this.currentPage,
                        pageSize: 5,
                        startTime: this.selectForm.startTime,
                        endTime: this.selectForm.endTime,
                        operation: this.selectForm.operation,
                        academyName: this.selectForm.academyName,
                    }
                }
                ).then(
                    (res) => {
                        // console.log(res)
                        this.jourdata.jourlist = res.data.records
                        this.jourdata.total = res.data.total
                    }
                )
            }
        },
        
    }
</script>

<style lang="less" scoped>
.info_container{
      height: 600px;
      width: 700px;
      margin-left: 150px;
      margin-top: 50px;
      font-size: larger;
}
.select-container{
    width: 1225px;
    background-color: rgb(255, 255, 255);
    padding-left: 30px;
    padding-top: 30px;
    padding-bottom: 20px;
}
</style>